<template>
  <div class="lg:flex lg:h-screen lg:overflow-hidden w-full mobile:h-screen">
    <menuBar></menuBar>
    <div
      class="lg:flex lg:h-screen lg:overflow-hidden w-full bg-white dark:bg-dark-background mobile:h-screen"
    >
      <TransitionGroup name="slide-fade">
        <SearchBoard v-if="flagStore.isSearchBoardOpen" />
        <ShareBoard v-if="flagStore.isShareBoardOpen" />
      </TransitionGroup>
      <ContentSidebar></ContentSidebar>
      <div
        class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
      >
        <TopNavigation></TopNavigation>
        <router-view />
      </div>
    </div>
    <TransitionGroup name="slide-fade">
      <Preview v-if="flagStore.isPreviewerOpen" />
    </TransitionGroup>
  </div>
</template>

<script setup>
import { useFlagStore } from '@/stores'
const flagStore = useFlagStore()
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
